<template>
	<view class="add-account-container">
		<top-title-text @closeBtn="closeBtn" titleText="添加账户"></top-title-text>
		<!-- scroll-view 解决弹框中内容过多时无法上下滑动问题 -->
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;">
			<!-- 明细父盒子 -->
			<view class="bank-content-container">
				<!-- 图标层 -->
				<view class="icon-content-container">
					<view class="icon-left-name">图标</view>
					<view class="icon-left-content-container" @click="changeFlag('showBankIconFlag', true)">
						<view :class="['add-account-icon', 'iconfont', account.icon]" :style="{color: account.iconColor}"></view>
					</view>
				</view>
				<!-- 名称层 -->
				<view class="name-content-container">
					<view class="name-left-name">名称</view>
					<view class="name-container-right">
					<!-- <view class="name-container-right" :style="{width: nameLength + 'rpx'}"> -->
						<u--input border="none" v-model="account.name" placeholder="设置名称" @change="change('name')"></u--input>
					</view>
				</view>
				<!-- 后四位层 -->
				<view class="num-content-container">
					<view class="num-left-name">尾号四位</view>
					<view class="num-left-content iconfont">
					<!-- <view class="num-left-content iconfont" :style="{width: numLength + 'rpx'}"> -->
						<u--input border="none" v-model="account.lastFourDigitsOfCard" placeholder="设置尾号" @change="change('lastFourDigitsOfCard')"></u--input>
					</view>
				</view>
				<!-- 余额层 -->
				<view class="money-content-container">
					<view class="money-left-name">余额</view>
					<view class="money-container-right">
					<!-- <view class="money-container-right" :style="{width: moneyLength + 'rpx'}"> -->
						<u--input border="none" v-model="account.money" placeholder="设置余额" @change="change('money')"></u--input>
					</view>
				</view>
				<view class="add-account-system-btn-container">
					<system-btn @systemConfirm="systemConfirm"></system-btn>
				</view>
			</view>
		</scroll-view>
		<!-- 银行卡图标组件弹框 -->
		<u-popup :show="showBankIconFlag" :round="20" mode="center" @close="changeFlag('showBankIconFlag', false)" @open="changeFlag('showBankIconFlag', true)">
			<bank-icon @selectBankIcon="selectBankIcon" :selectIconIndex="account.iconIndex"></bank-icon>
		</u-popup>
	</view>
</template>
<script>
	import {switchTab} from '@/util/util.js';
	import {checkStrType} from '@/util/regular/regular.js';
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import bankIcon from '@/components/bank-icon/bank-icon.vue';
	import systemBtn from '@/components/system-btn/system-btn.vue';
	export default {
		components: {
			topTitleText, bankIcon, systemBtn,
		},
		props: {
			account: {
				type: Object,
				default: () => {},
			}
		},
		data() {
			return {
				// account: {},								// 账户对象数据
				nameLength: 0,								// 名称长度
				moneyLength: 0,								// 金额长度
				numLength: 0,								// 尾号长度
				showAccountFlag: true,						// 展示分类
				showBankIconFlag: false,					// 显示图标选择组件
			};
		},
		methods: {
			/**
			 * 确定回调
			 */
			systemConfirm() {
				console.log("确定");
				console.log(this.account, "aaaaaa");
				debugger
				this.$emit("callback", this.account);
			},
			/** 选择图标函数
			 * @param {Object} index 图标所在集合索引
			* @param {Object} item 图标
			 */
			selectBankIcon(index, item) {
				this.account.icon = item.icon;
				this.account.name = item.name;
				this.account.iconIndex = index;
				this.account.iconColor = item.color;
				// console.log("选中第" + (index + 1) + "个");
				// this.account.icon = this.bankIconArr[index].icon;
				this.changeFlag('showBankIconFlag', false);
			},
			/** 根据名字切换对应值
			 * @param {Object} name flag名字
			 * @param {Object} flag 是否显示
			 */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/** 输入框改变事件
			 * @param {Object} name 属性名字
			 */
			change(name) {
				if (name == "money") {
					this.moneyLength = checkStrType(this.account[name] ? this.account[name] : '设置余额');
				} else if (name == "name") {
					this.nameLength = checkStrType(this.account[name] ? this.account[name] : '设置名字');
				} else if (name == "lastFourDigitsOfCard") {
					this.numLength = checkStrType(this.account[name] ? this.account[name] : '设置尾号');
				}
			},
			/**
			 * 点击x按钮函数
			 */
			closeBtn() {
				this.$emit("closeBtn");
			},
			/**
			 * 修改是否展示
			 */
			changeShowAccountFlag() {
				this.showAccountFlag = !this.showAccountFlag;
			}
		},
		mounted(){
			this.nameLength = checkStrType(this.account.name ? this.account.name : '设置名称');
			this.moneyLength = checkStrType(this.account.money ? this.account.money :  '设置余额');
			this.numLength = checkStrType(this.account.lastFourDigitsOfCard ? this.account.lastFourDigitsOfCard :  '设置尾号');
		},
	};
</script>
<style lang="scss">
	.add-account-container {
		width: 100%;
		min-height: 100rpx;
		font-size: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.bank-content-container {
			width: 100%;
			height: 100%;


			.icon-content-container {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				align-items: center;


				.icon-left-name {
					color: $themePurpleColor;
				}
				.icon-left-content-container {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 10%;
					height: 85%;
					background-color: $themeBgcLightGreyColor;
					border-radius: 50%;
					
					.add-account-icon {
						font-size: 42rpx;
					}
				}
			}

			.name-content-container {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name-left-name {
					color: $themePurpleColor;

				}
				.name-container-right {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 65%;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					background-color: $themeBgcLightGreyColor;
				}
			}

			.num-content-container {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.num-left-name {
					color: $themePurpleColor;
				}
				.num-left-content {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 65%;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					background-color: $themeBgcLightGreyColor;
				}
			}

			.money-content-container {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.money-left-name {
					color: $themePurpleColor;
				}
				.money-container-right {
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 65%;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					background-color: $themeBgcLightGreyColor;
				}
			}

			// 确定按钮
			.add-account-system-btn-container {
				margin-top: 200rpx;
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
